
<template>
  <view class="page user-page">
    <view class="user-head">
      <nut-row>
         <nut-col :span="2" style="height:100px"> </nut-col>
        <nut-col :span="8">
          <view class="user-img">
            <nut-avatar
              @click="toPage('/pages/user/userEditer')"
              size="100"
              icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
            ></nut-avatar>
          </view>
          <view class="user-info">
            <view class="flex">
              <view class="e2"></view> {{ user.realname }}
            </view>
            <view class="e22"> NO.{{ user.userId }}</view>
          </view>
        </nut-col>
        <nut-col :span="11">
          <view class="user-img">
            <view class="company" @click="login">
              <view class="e1"></view> {{ user.companyName }}
            </view>
          </view>
          <view class="user-info">
            <view class="flex"> <view class="e3"></view> 职业经纪</view>
            <view class="flex e24"> <view class="e4"></view> 实名认证</view>
          </view>
        </nut-col>
        <nut-col :span="3">
          <view class="right-icon u-icon1" @click="toPage('/pages/user/page/share')"/>
          <view class="right-icon u-icon2" @click="toPage('/pages/user/page/info')"/>
          <view class="right-icon u-icon3" @click="toPage('/pages/user/page/invate')"/>
        </nut-col>
      </nut-row>

      <nut-row class="user-tars" type="flex" justify="center" style="margin-top:30px">
        <nut-col :span="6">
          <view class="number">25</view>
          <view class="number-txt">访客</view>
        </nut-col>
        <nut-col :span="6">
          <view class="number">25%</view>
          <view class="number-txt">回头率</view>
        </nut-col>
        <nut-col :span="6">
          <view class="number">25</view>
          <view class="number-txt">本周新客</view>
        </nut-col>
        <nut-col :span="6">
          <view class="number">25</view>
          <view class="number-txt">吸客排行</view>
        </nut-col>
      </nut-row>
    </view> 
    <view class="user-page-tabs flex">
      <view :class="cur==1?'center user-tab-warp-cur':'center user-tab-warp'" @click="cur = 1" > <view class="user-tab house-icon"> </view> 我的房源 </view>
      <view :class="cur==2?'center user-tab-warp-cur':'center user-tab-warp'" @click="cur = 2" > <view class="user-tab account-icon"> </view> 我的账户 </view>
      <view :class="cur==3?'center user-tab-warp-cur':'center user-tab-warp'" @click="cur = 3" > <view class="user-tab feedback-icon"> </view> 意见反馈 </view>
    </view>
    <view class="user-page-tabs-content">
      <HoseList v-if="cur == 1" />
      <Account v-if="cur == 2" />
      <FeedBack v-if="cur == 3" />
    </view>
  </view>
</template>
<script>
import HoseList from "./components/HoseList.vue";
import Account from "./components/Account.vue";
import FeedBack from "./components/FeedBack.vue";
import Taro from '@tarojs/taro';
export default {
  components: { HoseList, Account, FeedBack },
  data() {
    return {
      search: "",
      palyFlag: false,
      user: {
        realname: "xxxxxxxxxxx",
        userId: "1111111",
        companyName: "xxxxxxxxxxx",
      },
      cur: 1,
      tabs: [
        { title: "1", paneKey: "1" },
        { title: "2", paneKey: "2" },
        { title: "3", paneKey: "3" },
      ],
    };
  },
  created() {
    
  },
  mounted() {},
  methods: {
     async  getUserInfo(){
      var th = this;
      th.ajax.get(th.ajax.api.getUserInfo).then(async (res) => {
         console.log("查询用户", res);  
         th.$store.dispatch("asyncApiUserInfo", res.data);
      });
     },
     async login() {
      
      // this.ajax.
      var th = this;
      var invitationCode = this.$store.state.wxUserInfo.invitationCode || '60ad9599d568'
      console.log("登录时检测 wxUserInfo= " , this.$store.state.wxUserInfo );
      console.log("登录时检测code = " , invitationCode);
      Taro.getUserProfile({
        lang: "zh_CN",
        desc: "获取你的昵称、头像、地区及性别",
        success: (response) => {
          console.log(response);
          var { nickName, avatarUrl } = response;
          const userInfo = response.userInfo;
          console.log("getUserProfile", userInfo);
          Taro.login({
            success(res) {
              console.log("Taro.login()===>", res);
              var { code } = res;
              
              if (code) {
                th.ajax.get(th.ajax.api.wxLogin, { appid: "wx27b778c6bb9469de", code:'', nickName, avatarUrl, invitationCode }).then(async (res) => {
                    
                      th.getUserInfo()

                  });
              } else {
                console.log("登录失败！" + res.errMsg);
              }
            },
          });
          Taro.setStorageSync("userInfo", { userInfo });
          
          Taro.getStorage({
            key: "userInfo",
            success(res) {
              console.log("缓存数据", res);
            },
          });
        },
        fail: () => {
          //拒绝授权
          console.error("您拒绝了请求");
        },
      });
    },
  },
};
</script>  

<style>
.flex-content {
  display: flex;
  justify-content: center;
}
.number {
  font-size: 18px;
}
 .company {
  font-size: 12px;
  display: flex;
  padding-left: 10px;
}
.e00{ 
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid #fff100;
}

.e1{
  width: 14px;
  height: 14px;
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/company.png) center center / 100% 100%;
  margin-right:10px;
}
.e2{
  width: 20px;
  height: 20px;
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/g1.png) center center / 100% 100%;
  margin-right:10px;
}
.e3{
  width: 28px;
  height: 15px;
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/e2.png) center center / 100% 100%;
  margin-right:10px;
  margin-left: 10px;
}
.e4{
  width: 26px;
  height: 15px;
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/e1.png) center center / 100% 100%;
  margin-right:10px;
  margin-left: 10px;
}
.e22{
  font-size: 12px;
  padding-left: 28px;
  margin-top: 8PX;
}
.e24{
  font-size: 12px;
  margin-top: 10PX;
}
.user-head{ 
  color: #fff;
  padding-top: 30px;
  padding-bottom: 10px;
  width: 100vw;  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/center-bg.png) center center / 100% 100%; }
 
.user-img{
  height: 100px;
}
.right-icon {
  width: 20px;
  height: 20px;
  margin-bottom: 30px;
}
.u-icon1 {
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/c1.png)
    center center / 100% 100%;
}
.u-icon2 {
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/c2.png)
    center center / 100% 100%;
}
.u-icon3 {
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/c3.png)
    center center / 100% 100%;
}

.user-tab-warp {
  flex: 1;
  padding: 10px 2px;
  height: 60px;
  background-color: #eee;
  color: #FFF;
}
.user-tab-warp-cur {
  flex: 1;
  padding: 10px 2px;
  height: 60px;
  background-color: #fff;
}
.user-tab {
  height: 40px;
  width: 40px;
}
.user-page-tabs{
  padding: 0 10PX;
  background-color: #eee;
}
.user-page-tabs > .center{
 flex-direction: column
}
.house-icon {
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/tab1.png)
    center center / 100% 100%;
}
.account-icon {
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/tab2.png)
    center center / 100% 100%;
}
.feedback-icon {
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/tab3.png)
    center center / 100% 100%;
}
.user-page-tabs-content {
  width: 100vw;
  flex: 1;
  overflow: auto;
}
.user-tars > view {
  text-align: center;
}
</style>